<template>
  <div class="tag-container">
    <form-column>
      <div class="tagWrap">
        <span>利润报表</span>
        <el-popover v-model:visible="visible" placement="bottom" popper-class="popper">
          <div class="btn">
            <svg-icon icon-class="share" />分享
          </div>
          <div class="btn">
            <svg-icon icon-class="edit" />编辑
          </div>
          <div class="btn">
            <svg-icon icon-class="delete" />删除
          </div>
          <template #reference>
            <svg-icon icon-class="more" class="more" @click="visible = true" />
          </template>
        </el-popover>
      </div>
    </form-column>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const visible = ref(false)
</script>

<style lang="scss" scoped>
.tag-container {
  display: inline-block;
  font-size: 12px;
  margin: 0 5px;
  .tagWrap {
    display: flex;
    height: 32px;
    background: rgba(50, 107, 210, 0.08);
    border-radius: 2px;
    padding: 10px;
    align-items: center;
    justify-content: center;

    span {
      color: #646a78;
      margin-right: 10px;
    }
  }
}
::v-deep(.el-popover.el-popper) {
  min-width: 55px !important;
}
.btn {
  width: 55px;
  height: 28px;
  display: flex;
  cursor: pointer;
  align-items: center;
  justify-content: space-around;
}
</style>
<style>
.popper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95px !important;
  min-width: 95px !important;
}
.more {
  cursor: pointer;
}
.popper:hover {
  cursor: pointer;
}
</style>
